<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios';
// 导入图标
import * as aecharts from 'echarts'
// 图表数据
const DataChart = reactive({
    current: [],
    last: [],
    ydata: [],
})
// 销售数量
const barToChart = ref()
// 初始化图表
const init = async () => {
    // 获取数据
    // 转成异步，先拿到数据再渲染
    await axios.get('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/barTo').then(res => {
        console.log(res.data);
        DataChart.current = res.data.current
        DataChart.last = res.data.last
        DataChart.ydata = res.data.ydata
    })
    // 通过dom，初始化echarts图表  获取ref虚拟化dom
    let myChart = aecharts.init(barToChart.value)
    // 数据源
    var option = {
        title: {
            text: '月报表'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: DataChart.ydata
        },
        series: [
            {
                name: '上月',
                type: 'bar',
                data: DataChart.last
            },
            {
                name: '本月',
                type: 'bar',
                data: DataChart.current
            }
        ]
    };
    // 给予数据源
    myChart.setOption(option)
}
onMounted(() => {
    init()
})

</script>
<template>
    <!-- 图表 -->
    <div class='barToChart' ref="barToChart"></div>
</template>
<style lang='less' scoped>
.barToChart {
    width: 100%;
    height: 400px;
}
</style>
<!-- pieChart -->